<template>
<div class="cmt-container">
    <h3 >发表评论</h3>
    <hr>
     <textarea placeholder="请输入要BB的内容（做多吐槽120字）"maxlength="120" v-model="msg"></textarea>
     <mt-button type="primary" size="large" @click="getgengxin">发表评论</mt-button>
     <div class="cmt-list">
        <div class="cmt-item"  v-for="(item, index) in contents" :key="index">
            <div class="cmt-title">
                第{{index+1 }}楼&nbsp;&nbsp; 用户: {{item.user_name}} 发表时间:{{item.add_time | dateFormat}}
            </div>
           <div class="cmt-body">
                
                   {{ item.content === 'undefined' ? '此用户很懒，嘛都没说': item.content }}
           </div>
        </div>
      
         
     </div>
       <mt-button  type="danger" size="large" @click="getMore">加载更多</mt-button>
    </div>
    
</template>


<script>
   
import {Toast} from 'mint-ui'
     export default{
         data(){
             return{
                 msg: "", // 评论输入的内容
                 contents:[],
                 pageindex: 1, 
                 id:this.$route.params.id
             }
         },
         created() {
             this. getxin()
         },
         methods:{
          async  getxin(){
             const {data:res} = await this.$http.get('api/getcomments/' +this.id +"?pageindex="+this.pageindex)
               console.log(res)
              if(res.status==0){
                  Toast('成功')
                   // 每当获取新评论数据的时候，不要把老数据清空覆盖，而是应该以老数据，拼接上新数据
               this.contents = this.contents.concat(res.message);
                //   this.contents=res.message;
             }else{
                  Toast(res.message)
            }
            },
             getMore() {
                // 加载更多
                this.pageindex++;
                this.getxin();
           },
     async  getgengxin(){
      // 校验是否为空内容
      if (this.msg.trim().length === 0) {
        return Toast("评论内容不能为空！");
      }

      // 发表评论
      // 参数1： 请求的URL地址
      // 参数2： 提交给服务器的数据对象 { content: this.msg }
      // 参数3： 定义提交时候，表单中数据的格式  { emulateJSON:true }
      const {data:res} =await this.$http.post("api/postcomment/" + this.$route.params.id)
          content: this.msg.trim()
          if (res.status==0) {
            // 1. 拼接出一个评论对象
            var cmt = {
              user_name: "匿名用户",
              add_time: Date.now(),
              content: this.msg.trim()
            };
            this.contents.unshift(cmt);
            this.msg = "";
          }
       
    }

           
         },
       
     }
</script>

<style scoped>
            .cmt-container h3{
               font-size:18px;
            }
            .cmt-container textarea{
                 font-size:14px;
                 height:85px;
                 margin:0;
            }
           .cmt-container .cmt-list{
               margin:5px 0;

           }
           .cmt-list  .cmt-item{
                font-size:12px;
           }
           .cmt-list  .cmt-item .title{
               line-height: 30px;
               background-color: #ccc;
           }
         .cmt-list  .cmt-item   .cmt-body{
              line-height: 35px;
              text-indent: 2em;
         }
</style>
